@import '../assets/css/function.scss';

/*主要是实现1px的单边框*/

@mixin border-resize ($position: 'bottom', $width: 1px, $background: #e6e6e6, $style: solid) {
  position: relative;
  &:after{
    content: '';
    position: absolute;
    pointer-events: none;
    background: $background;
    transform-origin: 0 0;
    @if $position == 'left' {
      top: 0;
      left: 0;
      width: $width;
      height: 100%;
    } @else if $position == 'top' {
      top: 0;
      left: 0;
      width: 100%;
      height: $width;
    } @else if $position == 'right' {
      top: 0;
      right: 0;
      width: $width;
      height: 100%;
    } @else if $position == 'bottom' {
      bottom: 0;
      left: 0;
      width: 100%;
      height: $width;
    } @else if $position == 'full' {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      border: $width $style $background;
    }
  }
  @media only screen and (-webkit-min-device-pixed-ratio:2) {
    @if $position == 'left' {
      &:after{
        transform: scaleX(.5);
      }
    } @else if $position == 'top' {
      &:after{
        transform: scaleY(.5);
      }
    } @else if $position == 'right' {
      &:after{
        transform: scaleX(.5);
      }
    } @else if $position == 'bottom' {
      &:after{
        transform: scaleY(.5);
      }
    }  @else if $position == 'full' {
      &:after{
        top: -100%;
        left: -100%;
        transform: scale(.5);
      }
    }
  }
}

/*如果after被占用了，那还有before啊*/

@mixin border-resize-pseudo ($position: 'bottom', $width: 1px, $background: #e6e6e6, $style: solid) {
  position: relative;
  &:before{
    content: '';
    position: absolute;
    pointer-events: none;
    background: $background;
    transform-origin: 0 0;
    @if $position == 'left' {
      top: 0;
      left: 0;
      width: $width;
      height: 100%;
    } @else if $position == 'top' {
      top: 0;
      left: 0;
      width: 100%;
      height: $width;
    } @else if $position == 'right' {
      top: 0;
      right: 0;
      width: $width;
      height: 100%;
    } @else if $position == 'bottom' {
      bottom: 0;
      left: 0;
      width: 100%;
      height: $width;
    } @else if $position == 'full' {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      border: $width $style $background;
    }
  }
  @media only screen and (-webkit-min-device-pixed-ratio:2) {
    @if $position == 'left' {
      &:after{
        transform: scaleX(.5);
      }
    } @else if $position == 'top' {
      &:after{
        transform: scaleY(.5);
      }
    } @else if $position == 'right' {
      &:after{
        transform: scaleX(.5);
      }
    } @else if $position == 'bottom' {
      &:after{
        transform: scaleY(.5);
      }
    }  @else if $position == 'full' {
      &:after{
        top: -100%;
        left: -100%;
        transform: scale(.5);
      }
    }
  }
}

/*如果精细度要求不是很高，利用box-shadow实现1px的全边框, 作废，真的难看*/

@mixin full-border-resize($width: 1px, $color: #e6e6e6) {
  box-shadow: inset 0px ($width*-1) ($width) (-$width*-1) $color;
}


.hairlines-bottom{
  @include border-resize()
}
.hairlines-top{
  @include border-resize('top')
}
.hairlines-left{
  @include border-resize('left')
}
.hairlines-right{
  @include border-resize('right')
}
.hairlines-full{
  @include border-resize('full')
}
.hairlines-right-pseudo{
  @include border-resize-pseudo('right')
}